<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Quasar Dialog Example</title>
    <!-- 引入 Quasar CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/quasar@1.20/dist/quasar.min.css">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <!-- 引入 Vue 和 Quasar JS -->
    <link rel="stylesheet" type="text/css" href="https://rf1v90cv.uks1.devtunnels.ms:8080/shikais-stunning-site.webflow-0307/simmind/simmind.css">
    <script src="https://cdn.jsdelivr.net/npm/showdown/dist/showdown.min.js"></script>


</head>
<body>
<div id="q-app">
    <q-btn label="Open Dialog" ></q-btn>
    <q-menu v-model="menuOpen" anchor="bottom left" self="top left" style="width: 300px; height: 500px;">
        <q-card  style="width: 500px; height: 500px;">

            <q-card-section class="simmind" style="width: 500px; height: 500px;">
                <sim-mind
                        ref="test"
                        :root.sync="root"
                        :theme.sync="theme"
                        @savedata="headleSaveData"
                        :uploadImage="uploadImage"
                        @savedata="mindmapsavedata"
                        @addNode="mindAddNode"
                        @editNode="mindEditNode"
                        @removeNode="mindRemoveNode"
                        @toolClick="mindHeadleCancel"
                        @nodeclick="mindmapnodeclick"
                        @rollback="mindrollback"
                        @editShow="mindeditShow"
                        @update="mindmapupdate"
                        @dragend="minddragend"
                        @cardEdit="mindCardEdit"
                />
            </q-card-section>

        </q-card>
    </q-menu>
</div>

<script src="https://wxserver.cards120.com/static/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/quasar@1.20/dist/quasar.umd.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script src="https://uploads-ssl.webflow.com/657c661418a503e0b43c9905/6651a1503b6a8020c7ae502d_simmind.umd.txt"></script>

<!--https://uploads-ssl.webflow.com/657c661418a503e0b43c9905/6651a1503b6a8020c7ae502d_simmind.umd.txt-->
<!--https://uploads-ssl.webflow.com/657c661418a503e0b43c9905/6651a125747e2eabb30f43a4_simmind-css.txt-->
<!--css的txt不能被识别，只有js可以按照txt的方式加载进去-->
<link rel="stylesheet" type="text/css" href="https://uploads-ssl.webflow.com/657c661418a503e0b43c9905/6651a125747e2eabb30f43a4_simmind-css.txt">

<script>
    new Vue({
        el: '#q-app',
        data: function () {
            return {
                menuOpen:false,
                dialogOpen: false,
                lockStatus: false,
                theme: "",
                root: {},
            }
        },
        methods: {
            mindCardEdit(e){
                // 找到原始内容 e.node
                console.log("mindCardEdit")
                return;
                var index = this.orderActivities.findIndex(a => {
                    let texttemp =  a.front.split("：").length > 1?a.front.split("：")[1]:a.front.split(":")[1]
                    return texttemp == e.card.node
                })

                this.card = this.orderActivities[index]
                this.editCard()
                this.mindMapUpdateNode = {node:e.node,data:e.card.node,id:e.card.id}

            },
            minddragend(e){

                console.log("minddragend")
                return;
                console.log("minddragend事件传递")
                console.log(e)
                //获取需要修改的card
                /**todo 每个节点的数据都不能一样不然就会混乱逻辑,修改使用id匹配解决这个问题。
                 * bug
                 * node1 '1'
                 * node3 '51'
                 *
                 * card变成node3了，后续操作就错了，换成 == 就ok了
                 */
                var index = this.orderActivities.findIndex(a => a.id == e.data.id)
                var card = this.orderActivities[index]
                // 各种情况下不发送drag完成的请求，相对位置没改变，drag之后原来listsameLevelId=0和e.top为0表示首位，同层首位
                // 左边和上边一样的话，这个位置就不变，就不进行后续操作

                if(card.mindmapParentId == e.left &&card.mindmapSameLevelId == e.top){
                    console.log("相对位置没变，所有drag不生效,首位问题除外")
                    return
                }

                card.mindmapLayer = e.layer
                if(e.layer!=0){

                    let leftIndex = this.orderActivities.findIndex(json => json.id==e.left)
                    card.mindmapParentId=this.orderActivities[leftIndex].id
                }else{
                    card.mindmapParentId = 0
                }

                if(e.top==""){
                    // 表示是头节点，查询的时候刚开始就要插入，如果有两个头结点按照最新的插入
                    card.listSameLevelId=-1
                }else{
                    let topIndex = this.orderActivities.findIndex(json => json.id==e.top)
                    card.mindmapSameLevelId=this.orderActivities[topIndex].id
                    card.listSameLevelId=0
                }
                // 更新这个card
                this.editCard(card)
                this.edit_save_card_ES_Only()
                console.log(card)

            },
            mindeditShow:function(e){
                console.log("mindeditShow")
                return;
                console.log("mindeditShow")
                var self = this
                // self.card.back=""
                self.show=""


            },
            mindrollback:function(){
                console.log("mindrollback")
                this.menuOpen = false
                return;
                this.cancelMindShow=false
                // console.log("全屏思维导图")
                // this.fullScreen(document.getElementsByClassName('baidumind'))
            },
            //全屏
            fullScreen:function(el) {

                console.log("fullScreen")
                return;
                var rfs = el.requestFullScreen || el.webkitRequestFullScreen || el.mozRequestFullScreen || el.msRequestFullScreen,
                    wscript;

                if(typeof rfs != "undefined" && rfs) {
                    rfs.call(el);
                    return;
                }

                if(typeof window.ActiveXObject != "undefined") {
                    wscript = new ActiveXObject("WScript.Shell");
                    if(wscript) {
                        wscript.SendKeys("{F11}");
                    }
                }
            },

            //退出全屏
            exitFullScreen:function(el) {

                console.log("exitFullScreen")
                return;

                var el= document,
                    cfs = el.cancelFullScreen || el.webkitCancelFullScreen || el.mozCancelFullScreen || el.exitFullScreen,
                    wscript;

                if (typeof cfs != "undefined" && cfs) {
                    cfs.call(el);
                    return;
                }

                if (typeof window.ActiveXObject != "undefined") {
                    wscript = new ActiveXObject("WScript.Shell");
                    if (wscript != null) {
                        wscript.SendKeys("{F11}");
                    }
                }
            },
            mindHeadleCancel:function(value){
                console.log("mindHeadleCancel")
                return;

                console.log("cancel的时候顺便去掉思维导图的显示框")
                this.cancelMindShow = false



            },
            // 更新事件监听mindEditNode mindRemoveNode 找到这个节点数据，然后再进行其他操作，去掉监控方式
            mindRemoveNode:function(value){
                console.log("mindRemoveNode")
                return;
                // this.cancelMindShow = true

                var self_ = this
                console.log("节点删除")
                console.log(value)
                // 节点内容text修改


                //



                var orderIndex = self_.orderActivities.findIndex(json => json.id==value.id)
                if(orderIndex!=-1){
                    self_.quickDelete(orderIndex)
                    self_.orderActivities.remove(orderIndex)
                }

            },
            mindEditNode:function(value){

                console.log("mindEditNode")
                return;
                var self_ = this
                console.log("节点编辑")
                if(value.dataAfter==value.dataPre){
                    return
                }
                console.log(value)

                // 调用修改的代码     json.front.split("：").length > 1?json.front.split("：")[1]:json.front.split(":")[1] dataTotal.nodeData.id
                var orderIndex = self_.orderActivities.findIndex(json => json.id==value.dataTotal.nodeData.id)
                if(orderIndex!=-1){

                    self_.card = self_.orderActivities[orderIndex]
                    self_.floatEdit = value.dataAfter

                    self_.cardOprate.known = 0
                    self_.oriCardTag=self_.oprateTag(self_.card)
                    self_.cardOprate = JSON.parse(JSON.stringify(self_.card));
                    self_.cardOprate.tag = self_.oprateTag(self_.card)
                    self_.cardOprate.front = self_.floatEdit
                    self_.cardOprate.back= self_.show
                    self_.card.back= self_.show
                    // save之后order没有变导致的问题
                    self_.edit_save_card();
                    /**
                     * save之后进行重置 front和back过程
                     */



                }else{
                    console.log("无此节点")
                }

            },
            mindAddNode:function(e){
                console.log("mindAddNode")
                return;
                var self = this
                console.log("节点新增1")
                console.log(e)

                /**
                 * 这里tag使用思维导图的tag表示
                 */
                self.cardOprate.tag = self.dynamicTags.join('-')
                self.cardOprate.front = e.data
                self.cardOprate.back = self.show
                self.cardOprate.known = 0
                self.cardOprate.eid = ""





                self.cardOprate.mindmapLayer=e.layer
                if(e.layer!=0){
                    let leftIndex = this.orderActivities.findIndex(json => json.id==e.left)
                    self.cardOprate.mindmapParentId=this.orderActivities[leftIndex].id

                }else{
                    self.cardOprate.mindmapParentId = 0

                }
                /**
                 * 除了top不一样，别的都一样。
                 */
                if(e.top==""){
                    // 表示是头节点，查询的时候刚开始就要插入，如果有两个头结点按照最新的插入
                    self.cardOprate.listSameLevelId=-1
                }else{
                    let topIndex = this.orderActivities.findIndex(json => json.id==e.top)
                    self.cardOprate.mindmapSameLevelId=this.orderActivities[topIndex].id
                    self.cardOprate.listSameLevelId=0
                }






                self.CardPostSubmit(self.cardOprate)

                //提交成功之后进行下一步的时候这时候进行更新操作
                self.updateMindMapRoot(e.node.root.children,e.data)


                // 添加成功之后将数据添加到activities中

                // self.orderActivities.push(jsonActivity1)
                // var objMind = JSON.parse(JSON.stringify(children))

            },
            mindmapupdate:function(value){
                console.log("mindmapupdate")
                return;
                console.log("监听到点击update事件发生")
                console.log(value)
            },

            // 点击保存按钮事件 // 递归保存变更层次的数据内容
            mindmapsavedata:function(value){
                console.log("mindmapsavedata")
                return;
                var self = this
                console.log("监听到点击savedate事件发生")
                console.log(value)
                var prepareListEditCard=[]
                var extractFromMindMap = []
                self.doLoop(extractFromMindMap,value.root.children,0,0)
                // 递归实现记录层号和传递数据到下一层
                self.orderActivities.map((a)=>{
                    var testjump = extractFromMindMap.forEach(b=>{
                        if(a.id==b.id){
                            if(a.mindmapLayer!=b.mindmapLayer||a.mindmapParentId!=b.mindmapParentId){
                                prepareListEditCard.push(b)
                            }
                        }
                    })
                    console.log(testjump)
                })
                console.log(prepareListEditCard)
                // prepareListEditCard.map((json)=>{updateMindMap()})

                prepareListEditCard.forEach((c)=>{
                    let index = self.orderActivities.findIndex(json => json.id == c.id)
                    if(index!=-1){
                        self.orderActivities[index].mindmapLayer = c.mindmapLayer
                        self.orderActivities[index].mindmapParentId = c.mindmapParentId
                        self.editCard(self.orderActivities[index])
                        self.edit_save_card_ES_Only()
                    }
                })
            },
            doLoop(extractFromMindMap,value,mindmapLayer,mindmapParentId){
                var self = this
                value.forEach((c)=>{
                    c.data.mindmapParentId = mindmapParentId
                    c.data.mindmapLayer = mindmapLayer
                    extractFromMindMap.push(c.data)
                    if(c.children.length>0){
                        self.doLoop(extractFromMindMap,c.children,mindmapLayer+1,c.data.id)
                    }
                })
            },
// 点击节点事件
            mindmapnodeclick:function(value){
                console.log("mindmapnodeclick")
                return;
                // this.cancelMindShow = true
                var self_ = this
                console.log("监听到点击node事件发生")
                console.log(value.data.text)
                // 找到点击的card并变成当前card
                var orderIndex = self_.orderActivities.findIndex(json => json.id==value.data.id)
                if(orderIndex!=-1){
                    this.card = this.orderActivities[orderIndex]
                }
                // this.timeline(value.data.text)
                self_.show=this.card.back.replace(/<img /g,"<img preview style='object-fit:contain' ").replace(/https:\/\/gitee.com/gm,this.global_request_url.requestNodeLocal)
            },
            changeMindMap:function() {

                this.mindMapShow= !this.mindMapShow
                // 进行index提升和降落
                if(this.mindMapShow){
                    this.simmindIndex = 0
                }else{
                    this.simmindIndex = -1
                }
                this.btngroupShow=!this.btngroupShow

            },


            async headleSaveData() {
                let data = await this.$refs.test.getNowView();
                console.log(data);
                console.log(this.$refs.test.getNowView);
            },
            uploadImage(e) {
                // eslint-disable-next-line no-unused-vars
                return new Promise((reslove, reject) => {
                    console.log(e);
                    setTimeout(
                        reslove(
                            "https://blog.xkongkeji.com/static/img/cover1.fb9e08c.jpg"
                        ),
                        3000
                    );
                });
            },
        },
        mounted() {
            this.$q = Quasar;
            this.root = {"data":{"text":"test测试"},"children":[{"data":{"id":7466,"back":"<p>3</p>","mindmapLayer":0,"mindmapParentId":0,"mindmapSameLevelId":7471,"listSameLevelId":-1,"text":"3"},"children":[{"data":{"id":7469,"back":"<p>66</p>","mindmapLayer":1,"mindmapParentId":7466,"mindmapSameLevelId":7467,"listSameLevelId":-1,"text":"6 0"},"children":[]},{"data":{"id":7467,"back":"<p>5</p>","mindmapLayer":1,"mindmapParentId":7466,"mindmapSameLevelId":7469,"listSameLevelId":0,"text":"4"},"children":[]},{"data":{"id":7471,"back":"<p>8</p>","mindmapLayer":1,"mindmapParentId":7466,"mindmapSameLevelId":7469,"listSameLevelId":0,"text":"8"},"children":[{"data":{"id":7465,"back":"<p>222</p>","mindmapLayer":2,"mindmapParentId":7471,"mindmapSameLevelId":7468,"listSameLevelId":-1,"text":"2"},"children":[]},{"data":{"id":7464,"back":"<p>1</p>","mindmapLayer":2,"mindmapParentId":7471,"mindmapSameLevelId":7466,"listSameLevelId":-1,"text":"1"},"children":[]}]},{"data":{"id":7472,"back":"<p>9</p>","mindmapLayer":1,"mindmapParentId":7466,"mindmapSameLevelId":7471,"listSameLevelId":0,"text":"9"},"children":[]},{"data":{"id":7470,"back":"<p>7</p>","mindmapLayer":1,"mindmapParentId":7466,"mindmapSameLevelId":7471,"listSameLevelId":0,"text":"7"},"children":[]},{"data":{"id":7468,"back":"<p>5</p>","mindmapLayer":1,"mindmapParentId":7466,"mindmapSameLevelId":7467,"listSameLevelId":0,"text":"51"},"children":[]}]}],"_updata":true};
            this.theme = "fresh-green-compat";
        }
    });
</script>
</body>
</html>
